<!-- 查看 -->
<template>
  <view class="box">
    <Header title="上传检查记录单"/>
    <view class="top-tab">
      <view v-for="(item, index) in tabData" :key="index" @click="checkTab(item.value)">
        <view class="label" :class="selectTab == item.value ? 'action' : 'noAction'">{{ item.name }}</view>
        <uv-line class="line" v-if="index != tabData.length - 1" color="#C0C4CC" :length="200"></uv-line>
      </view>
    </view>
    <view :style="{height: `calc(100vh - 44px - 66px - ${TopHeight.top}px)`,'overflow-y':'auto'}">
      <!-- 基本信息 -->
      <basicInformation v-if="selectTab == 0" :schoolId="formData.schoolId" :canteenId="formData.canteenId"></basicInformation>
      <!--检查信息 -->
      <view v-if="selectTab == 1">
        <!-- 开始检查表单 -->
        <uploadRecordForm :id="formData.id"></uploadRecordForm>
      </view>
    </view>
  </view>
</template>
<script setup>
import basicInformation from '@/packageLawEnforcement/pages/viewInfo/basicInformation.vue';
import uploadRecordForm from '@/packageLawEnforcement/pages/uploadRecord/uploadRecordForm.vue';
import {reactive, ref, getCurrentInstance} from "vue";
let {proxy} = getCurrentInstance();
import {onLoad} from '@dcloudio/uni-app';
import TopHeight from "@/common/topHeight";

let tabData = ref([
  {name: '基本信息', value: 0},
  {name: '检查信息', value: 1}
]);

let selectTab = ref(1);
let formData = ref({});

onLoad((option) => {
  if (option.data) {
    formData.value =JSON.parse(decodeURIComponent(option.data));
    selectTab.value=1;
  }
});

// tab选择
const checkTab = (e) => {
  selectTab.value = e
};
</script>

<style lang="scss" scoped>
@import "@/static/css/dailycheck/viewIndex.scss";

::v-deep.uv-textarea__field {
  text-align: left !important;
  padding: 10rpx;
}

::v-deep .speech-main {
  .content {
    .uv-textarea__field {
      text-align: left !important;
      height: 400px !important;
    }

    .uv-border {
      border: 0 !important;
    }
  }
}

.top-tab {
  display: flex;
  justify-content: space-around;
  line-height: 50rpx;

  & > view {
    display: flex;

    .label {
      margin-top: 30rpx;
      padding: 0 18rpx;
      font-size: 28rpx;
      color: #767676;

      &.action {
        color: #0256ff;
      }
    }
  }
}
</style>
